import styled from "styled-components";

export const ItemWrapper = styled.div`
   box-sizing: border-box;
   width:${props => props?.itemwidth}%;
   padding: 8px;
   
   .inner{
     width: 100%;
     .top{
        
        box-sizing: border-box;
        border-radius: 3px;
        overflow: hidden;

         .room-cover{
           position: relative;
          width: 100%;
          height: 0;
          padding-top: 66.66%;
            img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            object-fit: cover; 
          }
         }

        .slider {
          position: relative;
          width: 100%;
          height: 0;
          padding-top: 66.66%;

          .btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            z-index: 9;
            color: #666;
            
            &:hover {
              background-color: #fff;
            }

            &.left {
              left: 10px;
            }

            &.right {
              right: 10px;
            }
          }

          &:hover {
            .btn {
              display: flex;
            }
          }

          .ant-carousel {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;

            .slick-slider {
              touch-action: pan-y;
              height: 100%;
            }

            .slick-list, 
            .slick-track {
              height: 100%;
              touch-action: pan-y;
            }

            .slick-slide {
              height: 100%;
              
              & > div {
                height: 100%;
              }

              div {
                height: 100%;
              }
            }

            .slick-dots {
              bottom: 10px;
              z-index: 8;
              
              li {
                width: 6px;
                height: 6px;
                margin: 0 2px;

                button {
                  width: 6px;
                  height: 6px;
                  border-radius: 50%;
                  background-color: rgba(255, 255, 255, 0.8);
                }

                &.slick-active {
                  width: 8px;
                  height: 8px;

                  button {
                    width: 8px;
                    height: 8px;
                    background-color: #fff;
                  }
                }
              }
            }
          }

        }
        
        
        

        .desc{
           margin: 8px 0;
           color:${props => props.verifycolor}
        }
     }

     .bottom{
        margin-top: 10px;
        box-sizing: border-box;
        .name{
            color: #000;
            font-weight: 700;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin:4px 0;
        }

        .price{
          margin: 8px 0;
          color: #333;
          font-weight:400;
        }
        
        .comment{
            display: flex;
            align-items: center;
            .desc{
                font-size: 13px;
                font-weight: 600;
            }
        }

        .ant-rate-star {
          margin-right: 1px;
        }
     }
   }
`